<template>
    <div class="box">
        <!-- 头部 -->
        <div class="header_box">
            <van-icon class="icon" name="arrow-left" @click="back" />
            <span>1/<span class="smell">4 </span>选择种类</span>
            <span class="why" @click="show = !show">如何选择</span>
        </div>
        <!-- 选择帮助 -->
        <van-overlay :show="show">
            <div class="wrapper">
                <div class="block">
                    <div class="help_title">
                        <p>选择帮助</p>
                    </div>
                    <div class="all_text">
                        <div class="text_box" v-for="(item, index) in helpList" :key="index">
                            <p>{{ item.title }}</p>
                            <span>{{ item.content }}</span>
                        </div>
                    </div>
                    <van-button plain class="btn" @click="show = false">我知道了</van-button>
                </div>
            </div>
        </van-overlay>
        <!-- 店铺类型 -->
        <div class="changesShop_box">
            <div class="changesShop">
                <span>店铺类型</span>
                <div class="changesShop_btn">
                    <van-button class="btn1" :class="{ food: shopState }" @click="shopState = true">餐饮店铺</van-button>
                    <van-button class="btn1" :class="{ food: !shopState }" @click="shopState = false">零售店铺</van-button>
                </div>
            </div>
        </div>
        <!-- 餐饮店铺 -->
        <div v-if="shopState === true">
            <van-tabs title-active-color="#ff6e53">
                <div class="change_box">
                    <van-tab title="主营品类" class="van_tab_box">
                        <div class="find">
                            <div v-for="item in mainTypes" :key="item.id">
                                <p @click="find(item)" :class="{ active: item.id === number }">{{ item.text }}</p>
                            </div>
                        </div>
                        <van-tree-select :items="list" :active-id.sync="activeIds" :main-active-index.sync="activeIndex"
                            height="93vw" @click-item="getFa" style="width: 100%" />
                    </van-tab>
                </div>

                <van-tab title="辅营品类(选填)">
                    <van-tree-select :items="assist" :active-id.sync="assist_activeIds"
                        :main-active-index.sync="assist_activeIndex" height="93vw" />
                </van-tab>
            </van-tabs>
        </div>
        <!-- 零售店铺 -->
        <div v-else>
            <van-tabs title-active-color="#ff6e53">
                <div class="change_box">
                    <van-tab title="主营品类" class="van_tab_box">
                        <van-tree-select :items="retail_one" :active-id.sync="re_activeIds"
                            :main-active-index.sync="re_activeIndex" height="93vw" @click-item="getFa" />
                    </van-tab>
                </div>

                <van-tab title="辅营品类(选填)">
                    <van-tree-select :items="retail_two" :active-id.sync="re_activeIds_f"
                        :main-active-index.sync="re_activeIndex_f" height="93vw" />
                </van-tab>
            </van-tabs>
        </div>

        <!-- 下一步按钮 -->
        <div class="btn_box">
            <!-- 我要开店按钮 -->
            <van-button round class="btn_next" :disabled="checkedState" @click="goNext">下一步</van-button>
        </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex'
import {
    mainTypes,
    mainTypes_one,
    mainTypes_two,
    mainTypes_three,
    assistList
} from '../../allData/myShop/changeKind_food'
import { retail_one, retail_two } from '../../allData/myShop/changeKind_retail'
import { arr } from '../../allData/shopHelpData/changeHelp'
import { Notify } from 'vant';
export default {
    data() {
        return {
            show: false, // 如何选择遮罩
            helpList: '',
            // 店铺选择状态
            shopState: true,
            checkedState: true,
            listAll: [mainTypes_one, mainTypes_two, mainTypes_three], // 主营品类的数据
            list: mainTypes_one,
            mainTypes: mainTypes,
            activeIds: [], //三级选择的id
            activeIndex: 0, // 存储二级选择的第几个（index）
            number: 0,
            myKind: "",
            // 辅营品类的一些变量
            assist: assistList,
            assist_activeIds: [], // 辅营品类的第二级内容id
            assist_activeIndex: 0,

            // 零售店铺
            // 主营
            retail_one: retail_one,
            re_activeIds: [],
            re_activeIndex: 0,
            // 辅营
            retail_two: retail_two,
            re_activeIds_f: [],
            re_activeIndex_f: 0
        }
    },
    created() {
        this.helpList = arr
        this.myKind = {
            id: 0,
            name: '美食'
        }
        // console.log(this.myKind);
    },
    methods: {
        back() {
            this.$router.go(-1)
        },
        getFa() {
            this.checkedState = this.activeIds.length || this.re_activeIds.length > 0 ? false : true
            // console.log('开始选择了');
        },
        find(data) {
            this.number = data.id
            this.myKind = {
                id: data.id,
                name: data.text
            }
            this.list = this.listAll[data.id]
            // console.log(this.myKind);
        },
        // 点击下一步获取数据
        ...mapActions(['shop/getShopData']),
        goNext() {
            if (this.shopState) {
                let data_f = this.getDataFood()
                let main_food = ''
                let au_food = ''
                for (let i = 0; i < data_f.food_m.arrList.length; i++) {
                    main_food += data_f.food_m.arrList[i].text + '/'
                }
                if (data_f.food_f) {
                    for (let j = 0; j < data_f.food_f.arrList.length; j++) {
                        au_food += data_f.food_f.arrList[j].text + '/'
                    }
                } else {
                    Notify({ type: 'danger', message: '请选择辅营品类' });
                }

                // console.log('main_food', main_food)
                let data = {
                    shopKind: "餐饮店铺",
                    // 主营
                    myKind: data_f.myKind.name,
                    main: data_f.food_m.main.text + ":" + main_food,
                    // 辅营
                    au: data_f.food_f.main.text + ":" + au_food,
                }
                this['shop/getShopData'](data)
            } else {
                let main_food = ''
                let au_food = ''
                let data_a = this.getDataRetail()
                for (let i = 0; i < data_a.retail_m.arrList.length; i++) {
                    main_food += data_a.retail_m.arrList[i].text + '/'
                }
                if (data_a.retail_f) {
                    for (let j = 0; j < data_a.retail_f.arrList.length; j++) {
                        au_food += data_a.retail_f.arrList[j].text + '/'
                    }
                } else {
                    Notify({ type: 'danger', message: '请选择辅营品类' });
                }

                let data1 = {
                    shopKind: "零售店铺",
                    // 主营数据
                    myKind: '',
                    main: data_a.retail_m.main.text + ":" + main_food,
                    // 辅营品类
                    au: data_a.retail_f.main.text + ":" + au_food,
                }
                this['shop/getShopData'](data1)
            }
            this.$router.push('/ShopInformation')
        },
        // 获取餐饮的数据
        getDataFood() {
            let food_f
            let food_m = this.getDataFun(this.list, this.activeIndex, this.activeIds)
            let myKind = this.myKind
            // console.log('种类选择', this.myKind)
            // console.log('餐饮主营品类：', food_m)
            // // 辅营品类数据获取
            if (this.assist_activeIds.length > 0) {
                food_f = this.getDataFun(this.assist, this.assist_activeIndex, this.assist_activeIds)
                // console.log("餐饮辅营品类：", food_f);
            }
            return { myKind, food_m, food_f }
        },
        // 获取零售的数据
        getDataRetail() {
            let retail_m = this.getDataFun(retail_one, this.re_activeIndex, this.re_activeIds)
            // console.log("零售主营：", retail_m);
            // 零售辅
            let retail_f
            if (this.re_activeIds_f.length > 0) {
                retail_f = this.getDataFun(retail_two, this.re_activeIndex_f, this.re_activeIds_f)
                // console.log("零售辅营：", retail_f);
            }
            return { retail_m, retail_f }
        },
        // 从树形结构拿取数据的方法
        getDataFun(data, activeIndex, activeIds) {
            // * data ：需要查找的数据
            // * activeIndex：二级中的数据的id
            // * re_activeIds：一级的index
            // 获取第一级数据
            let main = {
                id: data[activeIndex].id,
                text: data[activeIndex].text
            }
            // 获取选择的children数据
            let arrList = []
            for (let i = 0; i < activeIds.length; i++) {
                arrList.push(data[activeIndex].children[activeIds[i]])
            }
            return { arrList, main }
        }
    }
}
</script>
<style lang="scss" scoped>
.box {
    width: 100%;
    background-color: #f5f5f5;
}

.header_box {
    position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;
    background-color: rgba(255, 110, 83, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    font-size: 17px;
    color: aliceblue;
}

.icon {
    width: 16%;
    padding-left: 20px;
}

.why {
    padding-right: 20px;
    font-size: 13px;
}

.smell {
    font-size: 15px;
    color: rgb(187, 186, 186);
}

/* 选择帮助 */
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.block {
    width: 70%;
    border-radius: 15px;
    background-color: #fff;
    text-align: center;
    z-index: 9999;
}
.van-tabs__line{
    z-index: 0 !important;
}
.btn {
    border: 1px solid #ff6e53;
    border-radius: 20px;
    color: #ff6e53;
    height: 36px;
    margin: 10px 0;
    padding: 0 60px;
}

.van-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

/* 如何选择 */
.help_title {
    font-size: 18px;
}

.all_text {
    width: 90%;
    margin: 0 auto;
    text-align: left;
}

.text_box p {
    text-align: left;
    font-size: 13px;
    font-weight: 400;
    margin: 1px 0;
}

.text_box span {
    font-family: 'MicrosoftYaHei', '微软雅黑 Regular', '微软雅黑';
    font-weight: 400;
    font-size: 13px;
    color: #b0afaf;
}

/* 店铺类型 */
.changesShop_box {
    width: 100%;
    margin: 0 auto;
    padding-top: 16%;
    background-color: #ffff;
}

.changesShop {
    width: 90%;
    margin: 0 auto;
}

.changesShop span {
    font-size: 14px;
}

.changesShop_btn {
    margin: 20px 0;
    text-align: center;
    padding-bottom: 20px;
}

.btn1 {
    margin: 0 10px;
    width: 44%;
    border-radius: 15px;
    border: none;
    background-color: #f5f5f5;
    height: 60px;
}

.food {
    background-color: #ff6e53;
    color: #ffff;
}

/* 主营品类 */

.change_box {
    display: flex;
    width: 100%;
}

.van_tab_box {
    display: flex;
}

.find {
    display: flex;
    flex-direction: column;
}

.find p {
    width: 100px;
    font-size: 14px;
    text-align: center;
    margin: 0;
    padding: 15px 0;
}

.van-sidebar {
    width: 100%;
}

.van-tree-select {
    width: 100%;
}

.active {
    background-color: #e6ecf9;
}

/* 下一步按钮 */
.btn_box {
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
    position: fixed;
    bottom: 0;
    z-index: 99;
}

.btn_next {
    width: 100%;
    background-color: #ff6e53;
    text-align: center;
    color: #ffff;
    font-size: 16px;
    margin: 12px 0;
}
</style>
